<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        //把时钟组件使用class初始化
        class clock1 extends React.Component{
            render(){
               return(
                  <div>
                    <h3>this is a clock</h3>
                    <h5>local time is :{this.props.date.toLocaleTimeString()}</h5>
                  </div>
               )
            }
        }
        //因为现在组件不是一个函数，而是一个es6类，所以我们可以添加一些属性，比如本地状态 local state and lifectyle hooks
        //add local state
        //we will add loccal state to three steps;
        //number one
        //replace this.props.date with this.state.date in the render() method;
        class clock2 extends React.Component{
            render(){
                return(
                        <div>
                            <h3>this is a clock</h3>
                            <h5>local time is :{this.state.date.toLocaleTimeString()}</h5>
                        </div>
                )
            }
        }
        //number two
        //Add a class constructor that assigns the initial this.state  添加一个构造器用来初始化这个状态
      /*  class Clock extends React.Component{
            constructor(props){
                super(props)
                this.state={date:new Date()}
            }
            render(){
                return(
                        <div>
                            <h3>this is a clock</h3>
                            <h5>local time is :{this.state.date.toLocaleTimeString()}</h5>
                        </div>
                )
            }
        }*/
      //we can declare (特别) special（声明）methiods on the compinent class to run some code when a component mounts and unmounts
        //我们可以声明特殊的方法在这个类组件中，当挂载和卸载的时候运行一些代码
        class Clock extends React.Component{
            constructor(props){
                super(props)
                this.state={date:new Date()}
            }
            render(){
                return(
                    <div>
                        <h3>this is a clock</h3>
                        <h5>local time is :{this.state.date.toLocaleTimeString()}</h5>
                    </div>
                )
            }
            //挂载
//            componentDidmount(){
//                this.timerId=setInterval(()=>{this.setState({date:new Date()})},1000)
//            }
            componentWillUnmount(){
                clearInterval(this.timerID);
            }
            componentDidMount() {
                this.timerID = setInterval(()=>this.tick(),1000);
            }

//            componentWillUnmount() {
//                clearInterval(this.timerID);
//            }

            tick() {
                this.setState({
                    date: new Date()
                });
            }
        }
        function App() {
            return (
                    <div>
                        <Clock />
                        <Clock />
                        <Clock />
                    </div>
            );
        }
        ReactDOM.render(
                <App />,
            document.getElementById('app')
        );
    </script>
</body>
</html>